<!--名单-->
<template>
  <div v-model="currentValue">
    <div class="panel panel-default panel-search">
      <el-form :inline="true">
        <el-form-item label="部门" prop="departmentId">
          <department-select
            :fnChange="search"
            v-model="page.query.param.departmentId"
            :clearable="true"
          ></department-select>
        </el-form-item>

        <el-form-item label="工号" prop="code">
          <el-input v-model="page.query.param.workID" clearable></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="page.query.param.name" clearable></el-input>
        </el-form-item>
 <el-form-item  label="状态" prop="workState" >
            <el-select
              @change="search"
              v-model="page.query.param.workState"
               :clearable="true"
          >

              <el-option
                :key="1"
                :value="'1'"
                :label="'1--试用'"
              ></el-option>
              <el-option
                :key="2"
                :value="'2'"
                :label="'2--正式'"
              ></el-option>
              <el-option
                :key="3"
                :value="'3'"
                :label="'3--离职'"
              ></el-option>
            </el-select>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" v-keycode="'ENTER'"
            >查询</el-button
          >
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <v-toolbar title="员工名单" type="alert">
      <!--<el-button plain @click="confirmFindClick">确定</el-button>-->
      <el-button type="primary" plain @click="cancelFind">关闭</el-button>
    </v-toolbar>

    <v-table
      ref="table"
      :page="page"
      :pageSize="12"
      :table-minheight="122"
      @dataloaded="onDataloaded"
    >
      <el-table-column
        prop="department"
        :sortable="true"
        label="部门"
        width="140"
      >
        <template slot-scope="{ row }"
          ><span style="color: black"> {{ row.department.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="code" :sortable="true" label="工号" width="90">
        <template slot-scope="{ row }"
          ><span style="color: black"> {{ row.workID }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="name" :sortable="true" label="名称" width="140">
        <template slot-scope="{ row }">
          <el-button :style="'width:100%'" @click="confirmFind(row)">
            <span
              :style="row.notWorkDate ? 'color: red' : 'color:darkmagenta'"
              >{{ row.name }}</span
            >
          </el-button>
        </template>
      </el-table-column>
    <el-table-column
        prop="workState"
        :sortable="false"
        label="状态"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ DICT.WORKSTATE[row.workState] }}
        </template>
      </el-table-column>

      <el-table-column
        prop="beginDate"
        :sortable="true"
        label="入职时间"
        width="140"
      >
        <template slot-scope="{ row }"> {{ row.beginDate }}</template>
      </el-table-column>
      <el-table-column
        prop="conversionTime"
        :sortable="true"
        label="转正时间"
        width="140"
      >
        <template slot-scope="{ row }">
          {{ row.conversionTime || "-" }}</template
        >
      </el-table-column>
      <el-table-column
        prop="notWorkDate"
        :sortable="true"
        label="离职时间"
        width="140"
      >
        <template slot-scope="{ row }"> {{ row.notWorkDate || "-" }}</template>
      </el-table-column>
    </v-table>
  </div>
</template>


<style rel="stylesheet/less" scoped lang="less">
.status_green {
  color: red;
}
</style>

<script>
import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";

export default {
  components: { DepartmentSelect },
  props: {
    value: {
      required: true,
    },
    departmentId: {
      //required: true
    },
    confirmFind: {
      Type: Function,
      required: true,
    },
    cancelFind: {
      Type: Function,
      required: true,
    },
  },
  data() {
    return {
       DICT: {
        WORKSTATE: {
          1: "1--试用",
          2: "2--正式",
          3: "3--离职",
        },
        GENDER: {
          男: "男",
          女: "女",
        },
        WEDLOCK: {
          已婚: "已婚",
          未婚: "未婚",
          离异: "离异",
        },
        POLITICID: {
          1: "1--中共党员",
          2: "2--中共预备党员",
          3: "3--共青团员",
          4: "4--民革党员",
          5: "5--民盟盟员",
          6: "6--民建会员",
          7: "7--民进会员",
          8: "8--农工党党员",
          9: "9--致公党党员",
          10: "10--九三学社社员",
          11: "11--台盟盟员",
          12: "12--无党派民主人士",
          13: "13--普通公民",
        },
        TIPTOPDEGREE: {
          本科: "本科",
          大专: "大专",
          硕士: "硕士",
          博士: "博士",
          高中: "高中",
          初中: "初中",
          小学: "小学",
          其他: "其他",
        },
        ENGAGEFORM: {
          劳动合同: "劳动合同",
          劳务合同: "劳务合同",
        },
      },

      formStatus: 1,
      orderDateRange: [],
      summaryMap: {},
      page: {
        query: {
          orderBys: "id|asc",
          param: {
            code: null,
            name: null,
            isDeleted: false,
          },
        },
        getData: this.$api.hr.EmployeeService.query,
      },
      tableActions: [
        {
          name: "编辑",
          handle: this.edit,
        },
        {
          name: "删除",
          handle: this.del,
          style: "color:red",
        },
      ],
    };
  },
  computed: {
    currentValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    confirmFindClick() {
      if (this.confirmFind) {
        this.confirmFind();
      }
    },
    cancelFindClick() {
      if (this.cancelFind) {
        this.cancelFind();
      }
    },

    onDataloaded(rsp) {},
    /*
            导出
             */
    exportRecords() {
      let params = this.getSearchParams();
      this.$api.attend.EmployeeService.export(params);
    },
    getSearchParams() {
      this.page.query.dateRanges = {};
      if (
        this.dateRangeType != null &&
        this.dateRange &&
        this.dateRange.length > 0
      ) {
        this.page.query.dateRanges[this.dateRangeType] = {
          startDate: this.dateRange[0],
          endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
        };
      }
      return this.page.query;
    },
    create() {
      this.$refs.formDiag.show();
    },
    edit(row) {
      this.$refs.formDiag.show({ id: row.id });
    },
    toggleStatus(row) {},
    del(row) {},
    onFormSaved() {
      this.$refs.formDiag.hide();
      this.$nextTick(this.search);
    },
    init(options = {}) {
      this.search();
    },
    search() {
      this.getSearchParams();
      this.$refs.table.load();
    },
    cancel() {
      this.dateRange = [];
      this.page.query.param = {};

      this.search();
    },
  },
  created() {},
  mounted() {
    this.$on("init", this.init);
  },
};
</script>
